import ReactDOM from 'react-dom'
import React, { Component } from 'react'

// 类组件定义状态
class App extends Component {

  state = {
    count: 0
  }

  // click的处理函数，count累加1
  handleClick = () => {
    // console.log(this.state.count)
    // 注意：不能直接修改state中的数据，都需要使用setState进行修改，作用：修改数据更新视图
    // 修改：用新的数据去替换愿来的数据
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    return (
      <div>
        <div>计数器：{this.state.count}</div>
        <button onClick={this.handleClick}>+1</button>
      </div>
    )
  }
}

// 结论：三种方式都可以，建议第三种，事件处理函数定义为箭头函数

ReactDOM.render(<App />, document.getElementById('root'))
